<template>
  <div class="Sidebar">
    <el-menu
      class="el-menu-vertical-demo"
      background-color="#242f42"
      text-color="#fff"
      color='#409EFF'
      active-text-color="#409EFF"
      :default-active="onRoutes"
      unique-opened
      router
    >
    <!--  router        :collapse="collapse"-->
    <!-- 循环数组里面的每一项，添加到侧边栏 -->
      <template v-for="item in items" :key="item.index" >
          <!-- 一级菜单栏或者使用下面的一张方法 -->
          <!-- <el-menu-item :index="item.index">
            <i :class="item.icon"></i>
            <template #title>{{ item.title }}</template>
          </el-menu-item> -->
          <!-- 判断循环查找数组中的二级菜单栏 -->
        <template v-if="item.subs"> 
          <el-submenu :index="item.index" :key="item.index">
            <template #title>
              <i :class="item.icon"></i>
              <span>{{ item.title }}</span>
            </template>
            <template v-for="subsItem in item.subs">
              <el-submenu
                v-if="subsItem.subs"
                :index="subItem.index"
                :key="subsItem.index" >
              </el-submenu>
              <el-menu-item
                v-else
                :index="subsItem.index"
                :key="subsItem.index"
                >{{ subsItem.title }}</el-menu-item>
            </template>
          </el-submenu>
        </template>
        <!-- 否者显示一级菜单栏 -->
        <template v-else>
          <el-menu-item :index="item.index" :key="item.index">
            <i :class="item.icon"></i>
            <template #title>{{ item.title }}</template>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "VueAdminSidebar",
  components: {},
  directives: {},
  data() {
    return {
      isCollapse: true,
      items: [
        {
          icon: "el-icon-collection-tag",
          index: "course",
          title: "暖心教程",
        },
        {
          icon: "el-icon-menu",
          index: "table",
          title: "基础必修",
          subs:[
            {
              index: "datastructure",
              title: "数据结构",
            },
            {
              index: "computer",
              title: "计算机操作系统",
            },
            {
              index: "network",
              title: "计算机网络",
            },
          ],
        },
        {
          icon: "el-icon-tickets",
          index: "tabs",
          title: "编程语言",
          subs:[
            {
              index: "java",
              title: "Java",
            },
            {
              index: "cplus",
              title: "C++",
            },
            {
              index: "c",
              title: "C",
            },
            {
              index: "javaScript",
              title: "JavaScript",
            },
            {
              index: "php",
              title: "PHP",
            },
            {
              index: "python",
              title: "Python",
            },
            {
              index: "typeScript",
              title: "TypeScript",
            },
          ],
        },
        {
          icon: "el-icon-date",
          index: "form",
          title: "行业领域",
          subs: [
            {
              index: "frontend",
              title: "前端",
            },
            {
              index: "rearend",
              title: "后端",
            },
            {
              index: "ai",
              title: "人工智能",
            },
            {
              index: "bigdata",
              title: "大数据",
            },
            {
              index: "applet",
              title: "小程序",
            },
            {
              index: "linux",
              title: "Linux运维",
            },
            {
              index: "andriod",
              title: "Andriod开发",
            },
            {
              index: "information",
              title: "信息安全",
            },
          ],
        },
        {
          icon: "el-icon-mobile-phone",
          index: "job",
          title: "求职",
        },
        {
          icon: "el-icon-s-platform",
          index: "programmer",
          title: "程序员",
        },
        {
          icon: "el-icon-s-opportunity",
          index: "welfare",
          title: "福利",
        },

      ],
    };
  },
  mounted() {},
  methods: {
  },
  computed: {
    onRoutes() {
      return this.$route.path.replace("/", "");
    },
    collapse() {
      return this.$store.state.collapse;
    },
  },
};
</script>

<style lang="less" scoped>
.Sidebar {
  // background-color: #f0f2f5;
   background-color: #001529;
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 220px;
  height: 100vh;
  min-height: 500px;
}

</style>